<clr-alert *ngIf="errorFlag" [clrAlertType]="'danger'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-alert *ngIf="successFlag" [clrAlertType]="'success'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<h2>Scheduled Jobs</h2><clr-icon shape="refresh" (click)="getAllScheduleJobs();"></clr-icon><br />
<clr-datagrid [clrDgLoading]="isLoadingScheduledJobs" id="scheduledg" name="scheduledg">
    <clr-dg-column [clrDgField]="'id'">ID</clr-dg-column>
    <clr-dg-column [clrDgField]="'jobType'">Job Type</clr-dg-column>
    <clr-dg-column>Scheduled At</clr-dg-column>
    <clr-dg-column [clrDgField]="'status'">Status</clr-dg-column>
    <clr-dg-column [clrDgField]="'description'">Description</clr-dg-column>
    <clr-dg-row *clrDgItems="let scheduledJob of scheduledJobs" [clrDgItem]="scheduledJob">
        <clr-dg-action-overflow>
            <button class="action-item" [disabled]="!(scheduledJob.status == 'INITIALIZING' || scheduledJob.status == 'SCHEDULED')" (click)="cancelSchedule(scheduledJob);">Cancel</button>
            <button class="action-item" [disabled]="!(scheduledJob.status == 'SCHEDULED')" (click)="pauseSchedule(scheduledJob);">Pause</button>
            <button class="action-item" [disabled]="!(scheduledJob.status == 'PAUSED')" (click)="resumeSchedule(scheduledJob);">Resume</button>
            <button class="action-item" (click)="getScheduledTaskDetails(scheduledJob);viewReportFlage=true;">Reports</button>
            <button class="action-item" (click)="deleteSchedule(scheduledJob);">Delete</button>
            <button class="action-item" (click)="deleteScheduleOnly(scheduledJob);">Delete Schedule Only</button>
        </clr-dg-action-overflow>
        <clr-dg-cell><a href="javascript://" (click)="getScheduledTaskDetails(scheduledJob);viewDetailedStatus=true;">{{scheduledJob.id}}</a></clr-dg-cell>
        <clr-dg-cell>{{scheduledJob.jobType}}</clr-dg-cell>
        <clr-dg-cell>
            <span *ngIf="scheduledJob.cronExpression != null">{{scheduledJob.cronExpression}}</span>
            <span *ngIf="scheduledJob.cronExpression == null">{{scheduledJob.scheduledTime}} ms</span></clr-dg-cell>
        <clr-dg-cell>{{scheduledJob.status}}</clr-dg-cell>
        <clr-dg-cell>{{scheduledJob.description}}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
        <clr-dg-pagination #pagination [clrDgPageSize]="10">
            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Schedule per page</clr-dg-page-size>
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} schedule
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>
<clr-modal [(clrModalOpen)]="viewDetailedStatus" [clrModalSize]="'lg'">
    <h3 class="modal-title">Scheduled Task Runs</h3>
    <div class="modal-body" *ngIf="scheduledTaskDetails">
        <span><b>Task Name: </b>{{scheduledTaskDetails.taskName}}</span><br/>
        <span><b>Task Description: </b>{{scheduledTaskDetails.taskDescription}}</span><br/>
        <clr-datagrid [clrDgLoading]="isLoadingScheduledTaskDetails" id="triggerdg" name="triggerdg">
            <clr-dg-column style="min-width:132px;" [clrDgField]="'taskStatus'">Task Status</clr-dg-column>
            <clr-dg-column style="min-width:150px;" [clrDgField]="'startTime'" [clrDgSortOrder]="startTimeDesc">Start Time</clr-dg-column>
            <clr-dg-column style="min-width:150px;" [clrDgField]="'endTime'">End Time</clr-dg-column>
            <clr-dg-column style="min-width:372px;" [clrDgField]="'taskFailureReason'">Failure Reason</clr-dg-column>
            <clr-dg-row *clrDgItems="let trigger of scheduledTaskDetails.triggers" [clrDgItem]="trigger">
                <clr-dg-cell style="min-width:132px;">{{trigger.taskStatus}}</clr-dg-cell>
                <clr-dg-cell style="min-width:150px;">{{trigger.startTime | date:'medium'}}</clr-dg-cell>
                <clr-dg-cell style="min-width:150px;">{{trigger.endTime | date:'medium'}}</clr-dg-cell>
                <clr-dg-cell style="min-width:372px;">{{trigger.taskFailureReason}}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination #triggerpg [clrDgPageSize]="10">
                    <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Triggers per page</clr-dg-page-size>
                    {{triggerpg.firstItem + 1}} - {{triggerpg.lastItem + 1}} of {{triggerpg.totalItems}} triggers
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
</clr-modal>
<clr-modal [(clrModalOpen)]="viewReportFlage" [clrModalSize]="'lg'">
    <h3 class="modal-title">Schedule Task Details</h3>
    <div class="modal-body">
        <code>
            <pre>{{scheduledTaskDetails |json}}</pre>
        </code>
        <button type="button" class="btn btn-outline" (click)="viewReportFlage=false;">OK</button>
    </div>
</clr-modal>